<template>
  <div @touchmove="touchmove" ref="boxHeight" class="manhuaxq">
    <div
      class="jiazai"
      v-if="
        manhuaxingqing == [] ||
        manhuaxingqing == null ||
        manhuaxingqing.length == 0
      "
    >
      
      <div class="loadingThree">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div class="manhua" v-else-if="songId != null">
      <div
        @touchmove="touchmoves"
        @click="changeye('none')"
        v-for="item in manhuaxingqing"
        :key="item.url"
      >
        <img :src="item[0].url + '?token=' + item[0].token" alt="" />
      </div>
    </div>


    <div class="seleteActive">
      <div>
        <div @click="changeye('bolck')">选择章节</div>
      </div>
      <div
        :class="isShows == 'none' ? 'diaNone' : 'diaBlock'"
        ref="listZhang"
        v-for="(item, i) in datas"
        :key="i"
      >
        <div @click="changeZhnagjie(i)" :class="active == i ? 'actives' : ''">
          {{ i + 1 }}
        </div>
      </div>
    </div>
    <div>{{ titles }}</div>
  </div>
</template>

<script>
import { getSendCategorys, getCarToonye, getCarToonXq } from "@/api/index.js";
export default {
  props: {
    songId: {
      type: Number,
     
    },
  },
  data() {
    return {
      // 章节
      datas: [],
      //漫画xiangqing
      manhuaxingqing: null,
      active: 0,
      flg: 0,
      boxHeight: 0,
      isShows: "none",
      titles:'正在加载中。。。'
    };
  },

  methods: {
    touchmoves() {
      this.isShows = "none";
    },
    changeye(text) {
      this.isShows = text;
    },
    changeZhnagjie(i) {
      this.active = i;
      this.manhuaxingqing = [];

      this.getManHua();
    },
    getManhTitle(id) {
      //获取漫画章节
      getSendCategorys(id)
        .then((result) => {
          function sortBy(attr, rev) {
            if (rev == undefined) {
              rev = 1;
            } else {
              rev ? 1 : -1;
            }
            return function (a, b) {
              a = a[attr];
              b = b[attr];
              if (a < b) {
                return rev * -1;
              }
              if (a > b) {
                return rev * 1;
              }
              return 0;
            };
          }
          let datasss = result.data.data.ep_list;
          datasss.sort(sortBy("ord", 1));
          this.datas = datasss;

          this.getManHua();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getManHua() {
      this.titles='正在加载中。。。'
      //获取漫画章里面的页数
      getCarToonye(this.datas[this.active].id)
        .then((result) => {
          // console.log(result);
          let imgs = result.data.data.images;
          imgs.forEach((img) => {
            let path = img.path;
            //获取漫画详情
            getCarToonXq(path)
              .then((result) => {
                this.manhuaxingqing.push(result.data.data);
                this.flg = 0;
              })
              .catch((err) => {
                console.log(err);
                this.titles='网络错误，请您稍后重试'
              });
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    touchmove(e) {
      this.boxHeight = this.$refs.boxHeight.scrollHeight;
      if (e.changedTouches[0].pageY > this.boxHeight - 1000) {
        this.flg++;
        if (e.changedTouches[0].pageY > this.boxHeight) {
          return;
        }
        if (this.flg == 1) {
          this.active += 1;
          this.getManHua();
        } else {
        }
      }
    },
  },
  created() {
    this.manhuaxingqing = [];
    let queryId = parseInt(this.$route.query.id);
    if (queryId == undefined || queryId == null) {
      this.$router.push("/home");
      return;
    } else {
      this.$emit("change-manhuua", queryId);
      setTimeout(() => {
        this.getManhTitle(this.songId);
      }, 500);
    }
  },
};
</script>

<style lang="less" scoped>
.manhuaxq {
  background-color: @color2;
}
.tishis {
  font-size: 30rem;
  text-align: center;
}
.diaNone {
  display: none !important;
}
.diaBlock {
  display: block !important;
}
.manhua {
  > div {
    img {
      width: 375rem;
      span {
        display: block;
        color: @color4;
        background-color: @color;
        margin-top: -30rem;
      }
    }
  }
}

.loadingThree {
  width: 150px;
  height: 15px;
  margin: 0 auto;
  margin-top: 100px;
}
.loadingThree span {
  display: inline-block;
  width: 15px;
  height: 100%;
  margin-right: 5px;
  border-radius: 50%;
  background: lightgreen;
  animation: load 1.04s ease infinite;
}
.loadingThree span:last-child {
  margin-right: 0px;
}
@keyframes load {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loadingThree span:nth-child(1) {
  animation-delay: 0.13s;
}
.loadingThree span:nth-child(2) {
  animation-delay: 0.26s;
}
.loadingThree span:nth-child(3) {
  animation-delay: 0.39s;
}
.loadingThree span:nth-child(4) {
  animation-delay: 0.52s;
}
.loadingThree span:nth-child(5) {
  animation-delay: 0.65s;
}
.ssss {
  height: 88.5vh;
  width: 100vw;
  background-color: @color2;
  color: @color4;
  font-size: 32rem;
}
.seleteActive {
  position: fixed;
  bottom: 40rem;
  width: 375rem;
  overflow: scroll;
  display: flex;
  flex-shrink: 0;
  &::-webkit-scrollbar {
    display: none;
  }

  > div {
    display: none;
    > div {
      width: 50rem;
      height: 26rem;
      margin: 5rem;
      line-height: 26rem;
      background: @color;
      text-align: center;
      color: @color2;
      border-radius: 8rem;

      &.actives {
        background-color: @color1;
        color: @color4;
      }
    }
  }
  > div:nth-child(1) {
    display: block;
    div {
      width: 60rem;
      color: @color2;
      background-color: @color;
      position: relative;
      top: 0;
      left: 0;
    }
  }
}
</style>